<template>
    <div class="big_box">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>资料管理</el-breadcrumb-item>
            <el-breadcrumb-item>合同列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>
        <el-form :model="selectfrom" ref="_selectfrom">
            <el-row :gutter="5">
                <el-col :span="3">
                    <el-input placeholder="合同名称"  v-model="selectfrom.Contract.Title"></el-input>
                </el-col>
                <el-col :span="3">
                    <el-input placeholder="合同编号" v-model="selectfrom.Contract.ContractNumber"></el-input>
                </el-col>
                <el-col :span="3">
                    <el-select placeholder="签订部门" filterable  v-model="selectfrom.Contract.DepartmentId">
                        <el-option :value="0" label="全部"></el-option>
                        <el-option v-for="v in AllDepartment" :value="v.Id" :label="v.DepartmentName"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="3">
                    <el-select placeholder="签订人" filterable v-model="selectfrom.Contract.SignUserId">
                        <el-option :value="0" label="全部"></el-option>
                        <el-option v-for="v in $store.state.AllUsers" v-if="v.InternshipState!=8" :label="v.UserName" :value="v.Id"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="3">
                    <el-date-picker style="width: 100%" placeholder="开始时间"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    v-model="selectfrom.Start"></el-date-picker>
                </el-col>
                <el-col :span="3">
                    <el-date-picker style="width: 100%" placeholder="结束时间"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    v-model="selectfrom.End"></el-date-picker>
                </el-col>
                <el-col :span="2">
                    <el-button  icon="el-icon-search"  @click="formdata"></el-button>
                </el-col>
            </el-row>
        </el-form>
        <el-row style="padding: 10px 0px">
            <el-col>
                <el-button-group>
                    <el-button class="buttongroup" type="danger" icon="el-icon-delete" @click="BatchDelete_event">批量删除</el-button>
                    <el-button class="buttongroup" type="success" icon="el-icon-circle-plus-outline" @click="AddContract_dialog=true">添加</el-button>
                </el-button-group>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-table :data="tableData" border stripe style="width: 100%"  @selection-change="SelectionChange_event">
                    <el-table-column type="selection" width="40" align="center"></el-table-column>
                    <el-table-column fixed type="index" label="序号" width="50" align="center" :index="indexMethod"></el-table-column>
                    <el-table-column fixed prop="ContractNumber" label="合同编号" align="center" show-overflow-tooltip  width="120"></el-table-column>
                    <el-table-column prop="Title" label="合同名称" align="center" show-overflow-tooltip  width="120"></el-table-column>
                    <el-table-column prop="ContractTypeOne" label="合同类型一" align="center" show-overflow-tooltip  width="120">
                        <template slot-scope="slot">
                            {{ GetContractTypeName(slot.row.ContractTypeOne) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="ContractTypeTwo" label="合同类型二" align="center" show-overflow-tooltip  width="120">
                        <template slot-scope="slot">
                            {{ GetContractTypeName(slot.row.ContractTypeTwo) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="CustomerId" label="客户信息" show-overflow-tooltip align="center" width="120">
                        <template slot-scope="slot">
                            {{ GetCustomerName(slot.row.CustomerId) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="NameSubjectMatter" label="标物名称" show-overflow-tooltip align="center"></el-table-column>
                    <el-table-column prop="ContractPrice" label="合同金额" show-overflow-tooltip align="center"></el-table-column>
                    <el-table-column prop="SignDate" label="签订日期" show-overflow-tooltip align="center">
                        <template slot-scope="slot">
                            {{ fmtDate_(slot.row.SignDate ) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="DepartmentId " label="签订部门" show-overflow-tooltip align="center">
                        <template slot-scope="slot">
                            {{ GetDepartmentName(slot.row.DepartmentId ) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="SignUserId" label="经办人" show-overflow-tooltip align="center">
                        <template slot-scope="slot">
                            {{ GetUserName(slot.row.SignUserId ) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="FileName" label="合同文件名称" show-overflow-tooltip align="center">
                        <template slot-scope="slot">
                            <label v-if="slot.row.FileName == null"> </label>
                            <label v-else>{{ slot.row.FileName }}</label>
                        </template>
                    </el-table-column>
                    <el-table-column prop="FilinDate" label="归档日期" show-overflow-tooltip align="center">
                        <template slot-scope="slot">
                            {{ fmtDate_(slot.row.FilinDate ) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="Remark" label="备注" show-overflow-tooltip align="center"></el-table-column>
                    <el-table-column fixed="right" label="操作" width="250" align="center">
                        <template slot-scope="scope">
                            <el-button type="success" plain size="mini" @click="edit_event(scope.row)">编辑</el-button>
                            <el-button type="warning" plain size="mini" @click="enclosure_down(scope.row)">下载此合同</el-button>
                            <el-button type="danger"  plain size="mini" @click="BatchDeleteOne_event(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="24">
                <div class="block">
                    <el-pagination
                            @size-change="formdata"
                            @current-change="formdata"
                            :current-page.sync="pagination.currentPage"
                            :page-sizes="pagination.pagesizes"
                            :page-size.sync="pagination.pagesize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total.sync="pagination.total">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>

        <el-dialog :visible.sync="AddContract_dialog" title="添加合同信息" width="70%">
            <AddContract :all-customer="AllCustomer" :all-project="AllProject" :all-department="AllDepartment" :all-contract-type="AllContractType"></AddContract>
        </el-dialog>

        <el-dialog :visible.sync="UpdataContract_dialog" title="修改合同信息" width="70%">
            <UpdataContract :contract="Contract_dateils" :all-customer="AllCustomer" :all-project="AllProject" :all-department="AllDepartment" :all-contract-type="AllContractType"></UpdataContract>
        </el-dialog>

    </div>
</template>

<script>
    import * as publicjs from "../../../public/Scriput/Public";
    import AddContract from "./AddContract";
    import UpdataContract from "./UpdataContract";

    export default {
        name: "Contract",
        components: {
            AddContract,
            UpdataContract,
        },
        data() {
            return {
                //表格查询数据
                selectfrom: {
                    Contract: {
                        SignUserId: '',
                        DepartmentId: 0,
                        Title: '',
                        ContractNumber: '',
                    },
                    Start: '',
                    End: '',
                },
                //表格数据
                tableData: [],
                //分页数据绑定
                pagination: {
                    currentPage: 1,
                    pagesizes: [10, 20, 30, 40, 50],
                    pagesize: 10,
                    total: 100
                },
                //多选列表的数据集合
                SelectMore_lis: [],
                //所有部门数据
                AllDepartment: [],
                //所有项目
                AllProject: [],
                // 供应商信息
                AllCustomer: [],
                // 获取合同类型
                AllContractType: [],
                AddContract_dialog: false,
                UpdataContract_dialog: false,
                Contract_dateils: {},
            }
        },
        created() {
            this.Init()
            this.formdata()
            publicjs.http(this.$http, this.$message)
        },
        methods: {
            //初始数据加载
            Init() {
                this.AllProject = publicjs.GetAllProject(this.$http)
                this.AllDepartment = publicjs.GetAllDepartment(this.$http)
                this.AllCustomer = publicjs.GetAllCustomer(this.$http)
                this.AllContractType = publicjs.GetAllContractType(this.$http)
            },
            //表格数据序列号
            indexMethod(index) {
                return ((this.pagination.currentPage - 1) * this.pagination.pagesize) + index + 1
            },
            //初始化表格数据加载
            formdata() {
                let loadding = this.openLoading();
                this.$http.post('Contract/GetContractDetail', {
                    currentPage: this.pagination.currentPage,
                    pagesize: this.pagination.pagesize,
                    Start: this.selectfrom.Start,
                    End: this.selectfrom.End,
                    Contract: this.selectfrom.Contract,
                }).then(res => {
                    loadding.close();
                    this.pagination.total = res.data.count
                    this.tableData = res.data.data
                }).catch(() => {
                    loadding.close();
                    this.$message.error('服务器异常,请联系管理员!')
                })
            },
            //表格单个删除
            BatchDeleteOne_event(obj) {
                this.SelectMore_lis.push(obj)
                this.BatchDelete_event()
            },
            //批量删除
            BatchDelete_event() {
                let idlis = []
                if (this.SelectMore_lis.length == 0) {
                    this.$message.warning('您还未选择需要删除的合同!')
                } else {
                    for (let i = 0; i < this.SelectMore_lis.length; i++) {
                        idlis.push(this.SelectMore_lis[i].Id)
                    }
                    this.$confirm('你确定要删除吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'error'
                    }).then(() => {
                        let loadding = this.openLoading();
                        this.$http.post('Contract/DeleteContractContent', idlis).then(res => {
                            loadding.close();
                            if (res.data) {
                                this.$message.success('删除成功')
                                this.formdata()
                                this.SelectMore_lis = []
                            } else {
                                this.$message.warning('删除失败')
                            }
                        }).catch(() => {
                            loadding.close();
                            this.$message.error('服务器异常,请联系管理员!')
                        })
                    }).catch(() => {
                        this.$message.info('已取消!')
                        this.SelectMore_lis = []
                    })

                }
            },
            //表格数据选择事件
            SelectionChange_event(value) {
                this.SelectMore_lis = value
            },
            //合同类型
            GetContractTypeName(value) {
                let name = ''
                if (value != 0) {
                    for (let i = 0; i < this.AllContractType.length; i++) {
                        if (this.AllContractType[i].Id == value) {
                            name = this.AllContractType[i].Name
                            return name
                        }
                    }
                }
            },
            //获取对应部门名字
            GetDepartmentName(value) {
                let name = ''
                if (value != 0) {
                    for (let i = 0; i < this.AllDepartment.length; i++) {
                        if (this.AllDepartment[i].Id == value) {
                            name = this.AllDepartment[i].DepartmentName
                            return name
                        }
                    }
                }
            },
            //获取对应客户信息名字
            GetCustomerName(value) {
                let name = ''
                if (value != 0) {
                    for (let i = 0; i < this.AllCustomer.length; i++) {
                        if (this.AllCustomer[i].Id == value) {
                            name = this.AllCustomer[i].CustomerName
                            return name
                        }
                    }
                }
            },
            //获取对应人员名字
            GetUserName(value) {
                let name = ''
                if (value != 0) {
                    for (let i = 0; i < this.$store.state.AllUsers.length; i++) {
                        if (this.$store.state.AllUsers[i].Id == value) {
                            name = this.$store.state.AllUsers[i].UserName
                            return name
                        }
                    }
                }
            },
            //时间转化
            fmtDate_(value) {
                let time = ''
                if (value == null) {
                    time = ''
                } else {
                    time = publicjs.formatDate(new Date(value),'yyyy-MM-dd')
                }
                return time
            },
            edit_event(obj) {
                this.Contract_dateils = obj
                this.UpdataContract_dialog = true
            },
            //文件下载
            enclosure_down(obj) {
                let option = { id: obj.Id, FileType: 4, Type: 0, FileName: obj.FileName }
                publicjs.DownLoadFile(option)
            },
        }
    }
</script>

<style scoped>

</style>
